<!--
	Needs a formName String, the name of the formular containing all the tree structure data.
-->

<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>

<%@ page import="fr.mywiki.view.web.struts.form.structure.SelectMultiStructure" %>
<%@ page import="fr.mywiki.view.web.struts.form.structure.SelectMultiStructController" %>

<%	
	SelectMultiStructure structureForm = (SelectMultiStructure)session.getAttribute(formName);
	SelectMultiStructController controller = structureForm.getSelectMultiStructureController();
	
	String rootKey = controller.getRootName();
	String tree = controller.getTree();
	String expandCodeJS = controller.getExpandJS();
	String rootImage = controller.getRootImage();
%>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/rico.js"></script>
<script language="JavaScript">
<!--
   var openImg = new Image();
   openImg.src = "<bean:message key="tree.open" bundle="IMAGES_RESSOURCE_KEY"/>";
   var closedImg = new Image();
   closedImg.src = "<bean:message key="tree.closed" bundle="IMAGES_RESSOURCE_KEY"/>";
   
   function showBranch(branch) {
      var objBranch = 
         document.getElementById(branch).style;
      if(objBranch.display=="block")
         objBranch.display="none";
      else
         objBranch.display="block";
   }
   
   // Swaps between openImg and closedImg
   function swapImage(img) {
      objImg = document.getElementById(img);
      if(objImg.src.indexOf('closed.gif')>-1)
         objImg.src = openImg.src;
      else
         objImg.src = closedImg.src;
   }

	function swapText(id){
		var text = 'text'+id;
		var newStyle = 'null';
		objText = document.getElementById(text);
		if(objText.className == 'select') {
			newStyle = 'unselect';
			objText.className = newStyle;
		} else {
			newStyle = 'select';
			objText.className = newStyle;
		}
			
		// On retrouve le span branche associe a ce text
		//var branch = document.getElementById('branch'+id);
		//if (branch!=null) {
		//	// On cherche tous les enfants, ce sont les spans trigger et a
		//	for(var i=0; i<branch.childNodes.length; i++){
		//		var trigger = branch.childNodes[i];
		//		if(trigger.tagName=="SPAN") {
		//			for(var i=0; i<trigger.childNodes.length; i++) {
		//				// Les enfants recuperes ici sont les spans text
		//				var element = trigger.childNodes[i];
		//				if(element.tagName=="SPAN")
		//					element.className = newStyle;
		//			}
		//		}
		//	}
		//}
	}
	
	function display(id) {
		document.forms["<%=formName%>"].idStructure.value=id;
	}
   
	function displayRoot() {
		document.forms["<%=formName%>"].idStructure.value="null";
	}
-->
</script>

<html:hidden property="idStructure"/>

<div id="treeContainer"  class="multiTreeSelection">
	<table width="95%" height="600" cellspacing=2 border=0 cellpadding=0>
		<tr> 
			<td valign="top"> 
				<div class="trigger" onClick="displayRoot();swapText('0');">
					<img src="<%=rootImage %>"
							border="0" id="rootimg" 
							onClick="showBranch('root');swapImage('rootimg');"/> 
					<span id="text0" class="unselect">
						<%= rootKey %>
					</span> 
				</div>
				<span class="branch" id="root"> <%= tree %> </span> 
			</td>
		</tr>
	</table>

<script language="JavaScript">
<!--
var rootText = document.getElementById('roottext');
-->
</script>
<script language="JavaScript" id="treeScript">
<!--
<%=	expandCodeJS %>
-->
</script>

</div>

